import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { Divider, Statistic } from 'antd';
import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { BudgetExhibit } from '../interface/budgetData';
import { BudgetDataSelector } from '../redux/Global/selector';
import FormatNumber from '../util/formatNumber';
import HeaderLoader from './ContentLoaders/HeaderLoader';

export const CalculateIncrease = (prve: string, curr: string) =>
{
    return Number((1 - Number(curr) / Number(prve)) * 100).toFixed(2);
};
export default function Statistics()
{
    const budgetData: BudgetExhibit[] = useSelector(BudgetDataSelector);

    const IncomeIncrease = useMemo(() =>
    {
        if (budgetData.length)
            return CalculateIncrease(budgetData[1].totalIncome, budgetData[0].totalIncome);

        return 0;
    }, [budgetData]);

    const ExpensesIncrease = useMemo(() =>
    {
        if (budgetData.length)
            return CalculateIncrease(budgetData[1].totalExpenses, budgetData[0].totalExpenses);

        return 0;
    }, [budgetData]);

    return (
        <div className='Statistics'>
            {
                Object.keys(budgetData).length
                    ? <div>
                        <div>
                            <span style={{ color: '#52c41a' }}>&yen;</span>
                            <Statistic title="本月总收入(元)" valueStyle={{ color: '#52c41a' }} value={FormatNumber(budgetData[0].totalIncome)} />
                        </div>
                        <div>
                            <span style={{ color: '#f5222d' }}>&yen;</span>
                            <Statistic title="本月总支出(元)" valueStyle={{ color: '#f5222d' }} value={FormatNumber(budgetData[0].totalExpenses)} />
                        </div>
                        <div>
                            <Statistic title="收入比上月增长"
                                value={Math.abs(Number(IncomeIncrease))}
                                precision={2}
                                valueStyle={{ color: IncomeIncrease < 0 ? '#52c41a' : '#f5222d' }}
                                prefix={IncomeIncrease < 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                                suffix="%" />
                        </div>
                        <div>
                            <Statistic title="支出比上月增长"
                                value={Math.abs(Number(ExpensesIncrease))}
                                precision={2}
                                valueStyle={{ color: ExpensesIncrease < 0 ? '#f5222d' : '#52c41a' }}
                                prefix={ExpensesIncrease < 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                                suffix="%" />
                        </div>
                    </div>
                    : <HeaderLoader />
            }
            <Divider />
        </div>
    );
}
